<template>
  <div class="cart" @click="goShopCart" ref="cart">
    <div class="has-goods" v-show="number>0">
      <i class="iconfont icon-gouwuche"></i>
      <span class="money">{{addPrice}}</span>
      <span class="num" >{{number}}</span>
    </div>
    <div class="no-goods" v-show="number<=0">购物车空空的呢</div>
    <div class="ball-container">
      <transition name="drop"
            v-for="(ball,i) in balls"
            @before-enter="beforeDrop"
            @enter="dropping"
            @after-enter="afterDrop" :key="i">
        <div v-show="ball.show" class="ball" v-bind:css="false">
          <div class="inner inner-hook" ></div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import shopCartMess from '../../shopCartMess/shopCartMess'

export default {
  name: 'shopCart',
  components: {},
  props: {
    shopData: Object
  },
  data() {
    return {
      balls : [
        {
        show: false
        },
        {
        show: false
        },
        {
        show: false
        },
        {
        show: false
        },
        {
        show: false
        }
      ],
      dropBalls: []
    }
  },
  computed: {
    goodsList() {
      return this.$store.state.goodsList
    },
    number() {
      return this.$store.getters.goodsNumber
    },
    addPrice() {
      return this.$store.getters.goodsPrice
    }
  },
  methods: {
    goShopCart() {
      this.$router.push({path: '/shopCartMess', query:{'isOpen':this.shopData.shopinfo.is_open,'shop_id':this.shopData.shop_id,'room_desk_id':this.shopData.id}})
    },

    //小球动画
    drop(el) {
      for(let i = 0; i < this.balls.length; i++) {
        let ball = this.balls[i];
        if(!ball.show) {
        ball.show = true;
        ball.el = el;
        this.dropBalls.push(ball);
        return ;
        }
      }
    },
    beforeDrop(el) {
      console.log(this.$refs.cart.getBoundingClientRect())
    let count = this.balls.length;
      while (count--) {
        let ball = this.balls[count];
        if(ball.show) {
        let rect = ball.el.getBoundingClientRect();
        let cart = this.$refs.cart.getBoundingClientRect()
        let x = rect.left - cart.left-72;
        let y = -(window.innerHeight - rect.top - 30);
        el.style.webkitTransform = `translate3d(0,${y}px,0)`;
        el.style.transform = `translate3d(0,${y}px,0)`;
        let inner = el.getElementsByClassName('inner-hook')[0];
        inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
        inner.style.transform = `translate3d(${x}px,0,0)`;
        }
      }
    },
    dropping(el) {
      /* eslint-disable no-unused-vars */
      let rf = el.offsetHeight;
      this.$nextTick(() => {
        el.style.webkitTransform = 'translate3d(0,0,0)';
        el.style.transform = 'translate3d(0,0,0)';
        let inner = el.getElementsByClassName('inner-hook')[0];
        inner.style.webkitTransform = 'translate3d(0,0,0)';
        inner.style.transform = 'translate3d(0,0,0)';
      });
    },
    afterDrop(el){
      let ball = this.dropBalls.shift();
      if(ball) {
        ball.show = false;
        el.style.display = 'none';
      }
    }
  }
} 
</script>

<style lang="stylus" scoped>
@import "~styles/common.styl"
  .cart
    min-width 2.5rem
    max-width 3rem
    height 0.8rem
    background rgba(32,29,26,.82)
    border-radius 0.4rem
    color #fff;
    line-height 0.8rem
    position relative
    i 
     font-size 0.3rem
     margin-left 0.2rem
    .money
      font-weight bold
      font-size 0.3rem
      margin-left 0.04rem
      &::before
        content '¥'
        font-size 0.24rem
    .num
      width 0.4rem
      height 0.4rem
      text-align center
      line-height 0.4rem
      background #ff4242
      color #ffffff
      float right 
      border-radius 0.2rem
      margin-top 0.2rem
      margin-right 0.18rem
    .no-goods
      font-size 0.26rem
      color #ddd
      text-align center
    .ball-container
      .ball
        position fixed
        left 50%
        bottom 30px
        z-index 200
        transition all 0.4s cubic-bezier(.3,-0.53,.83,.67)
        .inner
          width 16px
          height 16px
          border-radius 50%
          background-color $themeColor
          transition all 0.4s linear
</style>